<template>
  <ZHeader title="调停记录">
    <template v-slot:icon>
      <span class="icon-head" @click="redirectAddPage()">
        添加申请
        <van-icon name="arrow" class="icon-arrow"/>
      </span>
    </template>
  </ZHeader>

  <van-cell-group inset style="margin-top:5%;" v-for="(record ,index) in recordList" :key="index">
    <!--头-->
    <van-cell @click="redirectInfo(record.id, record.reason)">
      <template #title>
        <van-icon name="manager" color="#9a9b9d" size="5vw"/>
        <span style="margin-left: 15px;">
        <span style="font-size: 4.5vw;color: #4b4c4d"> {{ record.teacherName }} </span>
        <span style="font-size: 3vw;color: #9a9b9d;margin-left: 8px">申请人</span>
        </span>
      </template>
      <template #value>
        <span style="font-size:3.5vw;height:100%;color:#9a9b9d; text-align: end">
         <span>
         <span>详细信息</span>
          <van-icon name="arrow"/></span>
        </span>
      </template>
    </van-cell>
    <!--body-->
    <van-cell>
      <!--日期-->
      <van-row style="color: #9a9b9d;text-align: center;font-size: 3.5vw;margin-bottom: 3vw">
        <van-col span="5" offset="3" style="text-align: left;">
          申请日期
        </van-col>
        <van-col offset="1" style="text-align: left;color: #6d6d6d;;font-weight:500;">
          {{ record.start }}~{{ record.end }}
        </van-col>
      </van-row>
      <!--类型·-->
      <van-row style="color: #9a9b9d;text-align: center;font-size: 3.5vw;">
        <van-col span="5" offset="3" style="text-align:left;">
          申请类型
        </van-col>
        <van-col span="5" offset="1" style="text-align:left;color: #6d6d6d">
          {{ getType(record.type) }}
        </van-col>
        <!--状态-->
        <van-col
            style="margin-left:65vw;width:20%;border-radius:6vw 0 0 6vw;background-color:rgba(43,149,239,0.87);color: white ;font-size:3.5vw;border:1px solid #2b95ef;text-align: center">
          {{ getState(record.state) }}
        </van-col>
      </van-row>
    </van-cell>
  </van-cell-group>
  <van-empty v-if="recordList == null" image="search" description="无调停记录！"/>
  <div class="blank"></div>
</template>

<script>
import {onBeforeRouteLeave, useRouter} from 'vue-router';
import {Dialog} from "vant";
import 'vant/es/dialog/style';
import {getAllApply} from "/@/api/ttsq";
import {useDialogStateStore} from "../../store/modules/dialogState";
import ZHeader from "/@/components/ZHeader/ZHeader.vue";

export default {
  components: {
    ZHeader,
    'v-dialog': Dialog.Component,
  },
  setup() {
    const router = useRouter();

    const data = reactive({
      recordList: [],
      info: {
        "createDate": null,
        "end": null,
        "id": null,
        "reason": null,
        "start": null,
        "state": null,
        "teacherName": null,
        "type": null,
      }
    })
    // 跳转添加页面
    const redirectAddPage = () => {
      router.push('/add'); // 替换为你要跳转的页面路径
    }
    // 跳转详情页面
    const redirectInfo = (id, reason) => {
      router.push({path: '/info', query: {id:id, reason: reason}})
    }
    // 请求数据
    const initData = async () => {
      const res = await getAllApply();
      data.recordList = res.response.value.extend.records.map((item) => {
        return {
          "createDate": item.createDate,
          "end": item.end,
          "id": item.id,
          "reason": item.reason,
          "start": item.start,
          "state": item.state,
          "teacherName": item.teacherName,
          "type": item.type,
        }
      })
      console.log("888", data.recordList)
    }
    // 判断类型
    const getType = (type) => {
      return (type === 1) ? "停课" : "调课";
    }
    //判断状态
    const getState = (state) => {
      let res = "";
      if (state === 0) {
        res = "未审批"
      } else if (state === 1) {
        res = "通过"
      } else if (state === 3) {
        res = "不通过"
      }
      return res
    }

    onMounted(() => {
      initData();
    })
    const dialogState= useDialogStateStore()
    const fromRoute = ref(null);
    const toRoute = ref(null);
    onBeforeRouteLeave((to, from) => {
      fromRoute.value=from
      console.log("fromRoute",fromRoute.value)
      console.log("toRoute",toRoute.value)
      if (fromRoute.value && fromRoute.value.path === '/ttsq') {
        dialogState.setDialogState(true);
      }
    });
    // onBeforeRouteLeave()
    return {
      ...toRefs(data),
      redirectAddPage,
      getType,
      getState,
      redirectInfo,
    }
  }
}
</script>

<style scoped>
.blank{
  width: 100%;
  height: 5vh;
}
.icon-head{
  font-size: 4vw;
  color: #2b95ef;
  margin-right:1.5vw;
}
.icon-arrow{
  color: #2b95ef;
}

</style>
